<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<el-button slot="button" size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="请输入考试名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.permission" clearable placeholder="访问权限" style="width: 102px">
					<el-option label="完全私有" value="1"></el-option>
					<el-option label="只读共享" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.status" clearable placeholder="考试状态" style="width: 102px">
					<el-option label="正常" value="1"></el-option>
					<el-option label="禁用" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" :data="tableData" height="100%" stripe>
			<el-table-column label="排序" type="index" width="50" align="center"></el-table-column>
			<el-table-column label="考试试卷" prop="name" min-width="360" show-overflow-tooltip />
			<el-table-column label="考试分类" prop="sysClassify.name" min-width="100" />
			<el-table-column label="及格分数" min-width="80" align="center">
				<template slot-scope="{ row }">{{ row.passScore }}分</template>
			</el-table-column>
			<el-table-column label="展示方式" min-width="100" :formatter="returnShowTypeName" />
			<el-table-column label="排序方式" min-width="100" :formatter="returnSortTypeName" />
			<el-table-column label="考试状态" width="120" align="center">
				<el-switch slot-scope="{ row }" v-bind="switchConfig" v-model="row.status" @change="handleSwitchStatus($event, row)" />
			</el-table-column>
			<el-table-column label="关联课程" width="100" align="center">
				<el-button slot-scope="{ row }" size="mini" type="primary" @click="handleRelatedCourse(row.id)">选择课程</el-button>
			</el-table-column>
			<el-table-column label="设置考生" width="100" align="center">
				<el-button slot-scope="{ row }" size="mini" type="success" @click="handleConfigTestee(row)">设置考生</el-button>
			</el-table-column>
			<el-table-column label="操作" width="210">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="info" @click="handleConfigTime(row)">时间设置</el-button>
					<el-button size="mini" type="warning" @click="handleOpenDialog(row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()" />
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<time-config v-model="timeDialog" :data="selectedExam" @refresh="queryTableData()"></time-config>
		<select-user v-model="testeeDialog" :data="selectedTestee" @submit="handleUpdateTestee"></select-user>
		<related-course v-model="relatedDialog" :list="courseDataList" :data-id="selectedExamId"></related-course>
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import relatedCourse from './course';
import timeConfig from './timeConfig';
import listMixins from '@/mixins/listMixins';
import selectUser from '@/components/selectUser';
import { queryCoursePageList } from '@/api/course/sysCourse';
import { queryExamList, deleteExam, updateExam } from '@/api/exam/testExam';
export default {
	mixins: [listMixins],
	components: { formDialog, timeConfig, selectUser, relatedCourse },
	data() {
		return {
			pageName: '考试',
			selectedExam: {},
			timeDialog: false,
			testeeDialog: false,
			relatedDialog: false,
			selectedExamId: '',
			courseDataList: [],
			switchConfig: {
				activeValue: '1',
				inactiveValue: '2',
				activeColor: '#67C23A',
				inactiveColor: '#F56C6C'
			}
		};
	},
	computed: {
		listFunction() {
			return eval(queryExamList);
		},
		deleteFunction() {
			return eval(deleteExam);
		},
		selectedTestee() {
			let students = this.selectedExam?.testExamStudentVOList || [];
			let testees = lodash.mergeWith({}, ...students, (objValue, srcValue) => {
				if (lodash.isArray(objValue)) {
					return objValue.concat(srcValue);
				}
			});
			let examUsers = testees.testExamRuleList || [];
			return examUsers.map((n) => ({ ...n, userName: n.name }));
		}
	},
	mounted() {
		this.getCourseData();
	},
	methods: {
		//返回展示方式
		returnShowTypeName(row) {
			let type = row.paperShowType;
			let name = type === '1' ? '整卷' : type === '2' ? '单题' : '';
			let attrs = { size: 'small', effect: 'plain', type: 'danger' };
			return this.$createElement('elTag', { attrs }, `${name}展示`);
		},

		//返回排序方式
		returnSortTypeName(row) {
			let type = row.subjectsSort;
			let name = type === '1' ? '固定' : type === '2' ? '随机' : '';
			let attrs = { size: 'small', effect: 'plain', type: 'warning' };
			return this.$createElement('elTag', { attrs }, `${name}展示`);
		},

		//获取课程数据
		async getCourseData() {
			let page = { page: 1, limit: 9999, status: 1 };
			let params = { ...page, courseType: '6', auditStatus: '2' };
			let result = await queryCoursePageList(params).then((res) => res.data);
			if (result.code === '0') {
				this.courseDataList = result.data || [];
			}
		},

		//切换考试状态
		async handleSwitchStatus(status, data) {
			let params = { ...data, status };
			let result = await updateExam(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('切换考试状态成功');
			}
		},

		//关联课程
		handleRelatedCourse(id) {
			this.relatedDialog = true;
			this.selectedExamId = id;
		},

		//配置考生
		handleConfigTestee(data) {
			this.testeeDialog = true;
			this.selectedExam = { ...data };
		},

		//设置时间
		handleConfigTime(data) {
			this.timeDialog = true;
			this.selectedExam = { ...data };
		},

		//更新考生
		async handleUpdateTestee(arr) {
			let testees = arr.map((n) => ({ ...n, contain: '1' }));
			let testeeRules = [{ ruleType: '1', testExamRuleList: testees }];
			let params = { id: this.selectedExam.id, testExamStudentVOList: testeeRules };
			let result = await updateExam(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('设置考生成功');
				this.testeeDialog = false;
				this.queryTableData();
			}
		}
	}
};
</script>
